import React from 'react';
import {Table, Popconfirm, Button,Card} from 'antd';
import PropTypes from 'prop-types';

const UserList = ({onClick, record, users, onChange}) => {
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id'
    }, {
      title: '用户名',
      dataIndex: 'username',
      key: 'username'
    }, {
      title: '操作',
      dataIndex: '',
      key: 'operation',
      render: (text, record, index) => {
        return (
          <div>
            <Button onClick={() => onClick(record.id)} type="primary" icon="user">详情</Button>
          </div>
        );
      },
    }
  ];

  var pagination = {
    pageSize : 10,
    onChange: onChange
  };

  return (
    <Card title="用户列表">
      <Table
        dataSource={users.list}
        columns={columns}
        loading={users.loading}
        pagination={pagination}
      />
    </Card>


  );
};

UserList.propTypes = {
  onClick: PropTypes.func.isRequired,
  users: PropTypes.object.isRequired,
  onChange: PropTypes.func.isRequired,
};

export default UserList;
